/**
 * Author: Shen Yanqiu
 * Date: 2017-12-08
 * Time: 10:59
 *
 */
import React from 'react';
import { Row, Col, Spin } from 'antd';
import styles from './Details.less';
import { ShowImages } from 'components';
import PropTypes from "prop-types";
// import { Link } from 'react-router-dom';

class Details extends React.Component {
  static PropTypes = {
    details: PropTypes.object,
  };
  render () {
    const { details } = this.props;
    // console.log(details);
    // const info = detailsInfo.details.info;
    return (
      <div>
        {
          details !== undefined ?
            <div>
              <h3>物品借用详情</h3>
              <div className={styles.showStatus}>
                {
                  details.info.status === '-1' ?
                    <div className={styles.redColor} >未通过</div>
                    :
                    details.info.status === '1' ?
                      <div className={styles.blueColor}>已通过</div>
                      : <div className={styles.defaultColor}>待批审</div>
                }
              </div>
              <div className={styles.grayColor}>
                <Row>
                  <Col span={8} className={styles.marginTop}>
                    申请部门： <span>{details.info.bumen}</span>
                  </Col>
                  <Col span={8} className={styles.marginTop}>
                    申请人： <span>{details.info.user}</span>
                  </Col>
                  <Col span={8} className={styles.marginTop}>
                    编号： <span>{details.info.uid}</span>
                  </Col>
                </Row>
                <h4>明细</h4>
                <Row>
                  <Col span={16}>
                    <Col span={12} className={styles.marginTop}>
                      活动主题： <span>{details.info.mudi}</span>
                    </Col>
                    <Col span={12} className={styles.marginTop}>
                      活动地点： <span>{details.info.place}</span>
                    </Col>
                    <Col span={12} className={styles.marginTop}>
                      使用时间： <span>{details.info.starttime}</span>
                    </Col>
                    <Col span={12} className={styles.marginTop}>
                      结束时间： <span>{details.info.endtime}</span>
                    </Col>
                  </Col>
                  <Col span={8} />
                </Row>

                <ShowImages {...details} />

                <h4>活动经费</h4>
                <Row>
                  <Col span={16}>
                    <Col span={12} className={styles.marginTop}>
                      费用总计： <span>{details.info.feiyong}元</span>
                    </Col>
                    <Col span={12} className={styles.marginTop}>
                      参加人数： <span>{details.info.counts}</span>
                    </Col>
                  </Col>
                  <Col span={8} />
                </Row>
              </div>
            </div>
            : <Spin />
        }
      </div>
    );
  }
}
export default Details;
